<template>
	<div class="today_data">
		<x-header title="今日实时数据" :left-options="{backText: '✖'}">
		</x-header>
		<div class="content">
			<div class="header">
				<p>
					<span>营业额<span>新</span></span>
					<img src="../../assets/images/statistics/help.jpg" alt="" />
				</p>
				<p>￥<span>0.00</span></p>
			</div>
			<div class="order_datas">
				<div class="order_data_left">
					<p>
						<span>有效订单</span>
						<img class="help" src="../../assets/images/statistics/help.jpg" alt="" />
					</p>
					<p>0单</p>
					<p>
						<span>无效订单</span>
						<img class="help" src="../../assets/images/statistics/help.jpg" alt="" />
					</p>
					<p>0单</p>
				</div>
				<div class="order_data_right">
					<p>
						<span>预计订单收入</span>
						<img class="help" src="../../assets/images/statistics/help.jpg" alt="" />
					</p>
					<p>￥<span>0.00</span></p>
					<p>
						<span>商家补贴</span>
						<img class="help" src="../../assets/images/statistics/help.jpg" alt="" />
					</p>
					<p>￥<span>0.00</span></p>
				</div>
			</div>
			<div class="trend_tabs">
				<tab>
					<tab-item :selected="selectIndex===0" @on-item-click="onItemClick">营业额趋势</tab-item>
					<tab-item :selected="selectIndex===1" @on-item-click="onItemClick">有效订单趋势</tab-item>
				</tab>
			</div>
			<div class="chart_1" v-if="selectIndex===0">
				<x-chart :id="id" :option="option"></x-chart>
			</div>
			<div class="chart_2" v-if="selectIndex===1">
				<y-chart :id="id2" :option="option2"></y-chart>
			</div>
			<div class="total_tabs">
				<tab>
					<tab-item :selected="selectIndex2===0" @on-item-click="onItemClick2">累计</tab-item>
					<tab-item :selected="selectIndex2===1" @on-item-click="onItemClick2">分时</tab-item>
				</tab>
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem } from 'vux';
	import XChart from '@/page/statistics/trendOne';
	import YChart from '@/page/statistics/trendTwo';
	import options from '@/assets/js/trend_one_option';
	import option22 from '@/assets/js/trend_two_option';
	export default {
		name: 'today_data',
		data() {
			let option = options.bar;
			let option2 = option22.bar;
			return {
				id: 'test',
				option: option,
				id2: 'test2',
				option2: option2,
				selectIndex: 0, //0-营业额趋势  1-有效订单趋势
				selectIndex2: 0, //0-累计  1-分时
			}
		},
		components: {
			XChart,
			YChart,
			XHeader,
			Tab,
			TabItem,
		},
		computed: {

		},
		created() {

		},
		methods: {
			//营业额趋势切换
			onItemClick(id) {
				this.selectIndex = id;
			},
			//累计切换
			onItemClick2(id) {
				this.selectIndex2 = id;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.today_data {
		padding-bottom: 2rem;
		.content {
			.header {
				background: #fff;
				text-align: left;
				padding: .32rem .18rem 0 .18rem;
				p:nth-of-type(1) {
					display: flex;
					align-items: center;
					>span {
						font-size: .26rem;
						color: #939393;
						letter-spacing: .02rem;
						span {
							color: #f9324c;
							border: 1px solid #f9324c;
							padding: .02rem;
							margin: 0 .1rem 0 .02rem;
						}
					}
					img {
						width: .26rem;
						height: .26rem;
					}
				}
				p:nth-of-type(2) {
					font-size: .28rem;
					color: #171717;
					margin-top: .12rem;
					span {
						font-size: .44rem;
					}
				}
			}
			.order_datas {
				background: #fff;
				display: flex;
				justify-content: space-around;
				text-align: left;
				padding-bottom: .28rem;
				.help {
					width: .26rem;
					height: .26rem;
					margin-left: .1rem;
				}
				.order_data_left {
					width: 50%;
					border-right: 1px solid #f0f0f0;
					padding-left: .26rem;
					p {
						font-size: .26rem;
						color: #939393;
					}
					p:nth-of-type(1) {
						display: flex;
						align-items: center;
					}
					p:nth-of-type(2) {
						color: #040404;
					}
					p:nth-of-type(3) {
						display: flex;
						align-items: center;
					}
					p:nth-of-type(4) {
						color: #040404;
					}
				}
				.order_data_right {
					width: 50%;
					padding-left: .26rem;
					p {
						font-size: .26rem;
						color: #939393;
					}
					p:nth-of-type(1) {
						display: flex;
						align-items: center;
					}
					p:nth-of-type(2) {
						color: #040404;
					}
					p:nth-of-type(3) {
						display: flex;
						align-items: center;
					}
					p:nth-of-type(4) {
						color: #040404;
					}
				}
			}
			.trend_tabs {
				margin-top: .18rem;
			}
			.total_tabs {
				margin-top: .1rem;
			}
		}
	}
</style>